<template>
  <Header></Header>
  <Banner :isIndex="false" @changeCourse="changeCourse" :bannerList="banner_list" :courseList="course_list">

  </Banner>
  <div class="question-body">
    <div class="breadcrumb">
      <el-breadcrumb :separator-icon="'ArrowRightBold'">
        <el-breadcrumb-item class="link" @click="$router.push({name:'index'})">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{activeCourseName}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{activeSubjectName}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{currentItem_map[currentItem]}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-row justify="space-between">
      <el-col :span="4">
        <el-menu
                active-text-color="white"
                background-color="rgba(235, 244, 255, 1)"
                class="question"
                :default-active="currentItem"
                text-color="rgba(102, 102, 102, 1)"
                @select="handleSelect"
        >
          <el-menu-item index="myCourse">
            <el-icon><setting /></el-icon>
            <span>我的课程</span>
          </el-menu-item>
          <el-menu-item index="latelyStudy">
            <el-icon><setting /></el-icon>
            <span>最近在学</span>
          </el-menu-item>
          <el-menu-item index="videoCollect">
            <el-icon><setting /></el-icon>
            <span>视频收藏</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="19">
<!--        {{typeof currentItem}}-->
        <component :is="currentItem" :activeCourse="active_param" @upCourseName="upCourseName" :currentItem="currentItem" :subject_id="activeSubjectId" :subject_name="activeSubjectName" @changeSubjectName="changeSubjectName"></component>
      </el-col>
    </el-row>
  </div>
  <staticFooter></staticFooter>
</template>

<script>
  import staticFooter from "../../../components/staticFooter";
import myCourse from '@/components/courseBank/myCourse/index';
import latelyStudy from '@/components/courseBank/latelyStudy/index';
import videoCollect from '@/components/courseBank/videoCollect/index';
import Banner from "../../../components/Banner";
import Header from "@/components/Header";
import {useRoute, useRouter} from "vue-router";
import {bannerList, courseList} from "../../../api/api";
import {reactive,ref,onMounted } from 'vue';
export default {
  name: "index",
  setup(){
    let router = useRouter();
    let route = useRoute();

    // 题库模块字典
    let currentItem_map = reactive({'myCourse':'我的课程',
      'latelyStudy':'最近在学',
      'videoCollect':'视频收藏'
    })

    //当前课程
    let activeSubjectId = ref(0)
    let activeSubjectName = ref('')
    activeSubjectId.value = route.params.subject_id
    activeSubjectName.value = route.params.subject_name

    //banner图集合
    let banner_list = ref([])
    let getBannerList = () =>{
      bannerList({id:localStorage.getItem('activeCourse'),type:1}).then(res =>{
        console.log('轮播图列表',res)
        banner_list.value = res.data
      })
    }
    getBannerList();

    let upCourseName = (courseName) =>{
      activeSubjectName.value = courseName;
    }

    let activeCourseName = ref('')
    activeCourseName.value = localStorage.getItem('activeCourseName')
    let active_param = ref('')
    let changeCourse = (activeCourse) => {
      active_param.value = activeCourse.courseId
      activeCourseName.value = course_list.filter(item => item.courseID == activeCourse.courseId)[0].name;
      console.log('activeCourseName',activeCourseName.value);
      window.localStorage.setItem('activeCourseName', String(activeCourseName.value));

      getBannerList();
    }

    //课程列表
    let course_list = reactive([]);
    const getCourseList = () =>{
      courseList().then(res =>{
        console.log('课程列表',res)
        course_list.push(...res.data)
        let acoutCourse = window.localStorage.getItem('activeCourse') ? window.localStorage.getItem('activeCourse') : course_list[0].courseID
        window.localStorage.setItem('activeCourse',acoutCourse);
      })
    }
    getCourseList();

    //右侧动态组件
    let currentItem = ref('myCourse');

    //左侧menu
    const handleSelect = (key,keyPath) => {
      currentItem.value = key
    }

    let changeSubjectName = (subjectName) =>{
      activeSubjectName.value = subjectName;
    }

    onMounted(() =>{
      // let current = localStorage.getItem('currentItem')
      // console.log('current',current)
      // if(current != 'undefined' || current != 'null'){
      //   console.log('current',current)
      //   currentItem.value = current
      // }else{
      //   currentItem.value = 'myCourse'
      // }
    })
    return{
      changeSubjectName,
      activeCourseName,
      active_param,
      upCourseName,
      changeCourse,
      handleSelect,
      currentItem,
      currentItem_map,
      activeSubjectId,
      activeSubjectName,
      course_list,
      banner_list,
      latelyStudy,
      videoCollect,
    }
  },
  components:{
    Header,
    Banner,
    myCourse,
    latelyStudy,
    videoCollect,
    staticFooter
  }
}
</script>

<style>
  .el-menu-item.is-active{
    background-color: rgba(42, 130, 228, 1);
  }
</style>

<style scoped>
  .link{
    cursor: pointer;
  }
  .link :hover{
    color: #409eff !important;
  }
  .question-body{
    width: 1200px;
    margin: 0 auto;
    margin-bottom: 240px;
  }
  .question-body .breadcrumb{
    margin: 20px 0px;
  }
</style>
